<template>
	<view>
		<view class="body" v-if="imageList.length">
			<view class="dit-imgs" v-for="(item, index) in imageList" @click="commodityUrl(item.id)">
				<image :src="url2 + getSplit(item.mainImage)[0]" mode="aspectFill"></image>
				<view class="img-text">
					<text class="hot-text-name">
						<text style="color: black">{{ item.description }}</text>
					</text>
					<view class="numberDate">
						<text
							style="font-weight: bold; font-size: 35rpx">￥{{item.leaseGoodSkus[0].leaseRentalRules[0].everydayPrice ? item.leaseGoodSkus[0].leaseRentalRules[0].everydayPrice : '无标价' }}</text>
						<text>/天</text>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="emp">
			<u-empty mode="data" icon="/static/main/image2x.png"></u-empty>
		</view>

	</view>
</template>

<script>
	import {
		numberCut
	} from '@/utils/index.js';
	import {
		baseUrl
	} from '../../config.js';
	export default {
		name: 'recommend',
		props: {
			imageList: {
				type: Array,
				default: () => [] // 默认空数组
			},
			url: {
				type: '',
				default: () => ''
			}
		},
		data() {
			return {
				url2: ''
			};
		},
		methods: {
			getSplit(listStr) {
				return listStr?.split(',') || []
			},
			commodityUrl(id) {
				this.id = id;

				uni.navigateTo({
					// 正确方式：使用 ${id} 插入变量
					url: `/subPages/main/commodity?id=${id}`
				});
			},
			cut(row, bool) {
				let number;
				if (!row.leaseGoodSkus) {
					number = 0;
				} else if (!row.leaseGoodSkus[0].leaseRentalRules) {
					number = 0;
				} else {
					number = row.leaseGoodSkus[0].leaseRentalRules[0].everydayPrice;
				}

				return numberCut(number || 0, bool);
			}
		},
		mounted() {
			setTimeout(() => {
				this.url2 = baseUrl;
				console.log("imageList", this.imageList)
			}, 500);
		}
	};
</script>

<style lang="scss" scoped>
	.body {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.dit-imgs {
			margin: 20rpx;
			border-radius: 20rpx;
			width: 300rpx;
			height: 400rpx;
			background-color: #fff;

			display: flex;
			justify-content: center;
			flex-direction: column;

			image {
				margin: 30rpx;
				width: 250rpx;
				height: 250rpx;
			}

			.img-text {
				margin: 0 20rpx;

				.hot-text-name {
					display: -webkit-box;
					-webkit-line-clamp: 2;
					/* 限制为两行 */
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: normal;
					/* 允许文本换行 */
				}

				.numberDate {
					color: red;
					font-size: 25rpx;
				}
			}
		}
	}
</style>